<!-- src/components/AIQuery.vue -->
<template>
  <v-card
      class="mx-auto"
      max-width="900"
      variant="outlined"
  >
    <v-card-item>
      <div>
        <div class="text-overline mb-1">
          AI 智能问答
        </div>
        <div class="text-h6 mb-1">市场评估宏观环境分析</div>
        <div class="text-caption">指令: {{ prompt }}</div>
      </div>
    </v-card-item>

    <v-card-actions>
      <v-btn
          @click="handleQuery"
          :loading="isLoading"
          :disabled="showResult"
          variant="tonal"
          color="primary"
      >
        开始问答
      </v-btn>
    </v-card-actions>

    <v-divider v-if="isLoading || showResult"></v-divider>

    <v-card-text v-if="isLoading">
      <div class="d-flex align-center">
        <v-progress-circular
            indeterminate
            color="primary"
            size="24"
            class="mr-2"
        ></v-progress-circular>
          <span>AI 正在思考中...</span>
      </div>
    </v-card-text>

    <v-card-text v-if="showResult">
      <div class="font-weight-bold mb-2">对应答案：</div>
      <!-- v-html 会渲染出 HTML 标签，displayedAnswer 会被动态填充 -->
      <div v-html="displayedAnswer" class="answer-content"></div>
    </v-card-text>
  </v-card>
</template>

<script setup>
import { ref } from 'vue';

// --- 数据区 ---
const prompt = ref('现需要系统性框架做市场评估，请从PESTEL六个维度分析新能源汽车出口市场的宏观环境...');

// 完整的答案，包含HTML标签
const fullAnswer = ref(`
  <h4>一、政治（Political）</h4>
  <ul><li>贸易壁垒与关税波动</li><li>政策稳定性与连续性</li><li>地缘政治冲突</li><li>国际协议与联盟</li><li>出口国政治风险评级</li><li>政府补贴与产业扶持</li></ul>
  <h4>二、经济（Economic）</h4>
  <ul><li>目标市场 GDP 增速</li><li>汇率波动影响</li><li>新能源汽车渗透率</li><li>产业链成熟度</li><li>消费者购买力</li><li>基础设施投资</li></ul>
  <h4>三、社会（Social）</h4>
  <ul><li>消费习惯与偏好</li><li>环保意识与政策响应</li><li>劳动力成本与技能</li><li>人口结构与城市化率</li><li>社会文化禁忌</li><li>教育水平与技术接受度</li></ul>
  <h4>四、技术（Technological）</h4>
  <ul><li>核心技术自主可控性</li><li>专利布局与技术壁垒</li><li>技术迭代风险</li><li>供应链技术协同</li><li>数据驱动技术合规</li><li>技术标准国际化</li></ul>
  <h4>五、环境（Environmental）</h4>
  <ul><li>电池环保标准</li><li>碳排放标准</li><li>环保认证周期</li><li>可再生能源供电占比</li><li>极端气候适应性</li><li>电子废弃物处理要求</li></ul>
  <h4>六、法律（Legal）</h4>
  <ul><li>数据隐私法规</li><li>知识产权保护</li><li>产品安全标准</li><li>贸易合-规审查</li><li>跨境数据流动限制</li><li>争议解决机制</li></ul>
  <h4>逻辑闭环设计</h4>
  <p><strong>政策驱动技术迭代：</strong>欧盟碳排放法规倒逼中国车企研发固态电池，技术突破后可降低碳足迹，符合环保补贴要求，形成 “政策 - 技术 - 环境” 正向循环。</p>
  <p><strong>经济层级联动合规：</strong>高购买力市场（如欧洲）接受高端技术溢价，支撑研发投入；低购买力市场（如东南亚）依赖成本优势，需通过本地化生产规避关税，形成 “市场分层 - 成本结构 - 合规策略” 闭环。</p>
  <p><strong>数据合规串联全维度：</strong>GDPR 等法规要求车企改造技术系统（如匿名化处理），影响产品设计和供应链协同，最终关联政治（贸易壁垒）、经济（成本）、社会（信任度）等层面，形成 “法律 - 技术 - 市场” 一体化逻辑。</p>
`);

// --- 状态控制 ---
const isLoading = ref(false);
const showResult = ref(false);
const displayedAnswer = ref(''); // 用于在界面上逐字显示
let typingInterval = null;

// --- 逻辑方法 ---
const handleQuery = () => {
  // 重置状态
  isLoading.value = true;
  showResult.value = false;
  displayedAnswer.value = '';
  if (typingInterval) clearInterval(typingInterval);

  // 模拟3秒思考过程
  setTimeout(() => {
    isLoading.value = false;
    showResult.value = true;
    startTypingEffect();
  }, 3000);
};

// 实现打字机效果
const startTypingEffect = () => {
  let index = 0;
  const textToType = fullAnswer.value.trim();
  const typingSpeed = 10; // 毫秒

  typingInterval = setInterval(() => {
    if (index < textToType.length) {
      displayedAnswer.value += textToType[index];
      index++;
    } else {
      clearInterval(typingInterval);
    }
  }, typingSpeed);
};
</script>

<style scoped>
/* Vuetify 提供了很好的基础样式，我们只需要微调 */
.answer-content {
  line-height: 1.8;
}
.answer-content h4 {
  margin-top: 16px;
  margin-bottom: 8px;
}
.text-caption {
  white-space: pre-wrap;
  word-break: break-all;
}
</style>